<template>
  <!--todo 文案调整,价格|日期过滤器,表格宽度-->
  <div class="schemasList">

    <div class="content">
      <el-row>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item>方案列表</el-breadcrumb-item>

        </el-breadcrumb>

      </el-row>
      <el-row :gutter="12">
        <!--todo 响应式-->
        <el-col :span="16">


          <el-select style="width:100px" size="small" v-model="vm.query.status" @change="query" placeholder="方案状态">
            <el-option label="全部状态" value=""></el-option>
            <el-option label="待审核" value="auditing_1st"></el-option>
            <el-option label="送审中" value="auditing_2nd"></el-option>
            <el-option label="审核通过" value="pass"></el-option>
            <el-option label="审核拒绝" value="refuse"></el-option>
          </el-select>

          <el-select @change="query" style="width:100px" size="small" v-model="vm.query.shop_id" placeholder="选择店铺">
            <el-option
              v-for="item in shops"
              :key="item.id"
              :label="item.shop_name"
              :value="item.id">
            </el-option>

            <!--$this->  xxxx-->
          </el-select>
        </el-col>
        <el-col :span="8">
          <el-input
            size="small"
            placeholder="输入关键词"
            v-model="vm.query.keyword"
            prefix-icon="el-icon-search"
            @change="query({reload:true})"
            class="input-with-select">
            <el-button
              size="small"

              @click="vm.query.keyword='',query({reload:true})"
              slot="append"
            >清除
            </el-button>

          </el-input>
        </el-col>

      </el-row>

      <el-table
        :data="vm.models"
        stripe
        border style="width: 100%">


        <el-table-column

          prop="id"
          label="#"
          width="60"
         >
        </el-table-column>

        <el-table-column

          prop="logo"
          label="申请时间"
          >
          <template slot-scope="scope">


            <div>{{scope.row.submit_time}}</div>
          </template>
        </el-table-column>
        <el-table-column

          prop="thread_name"
          label="客户姓名"
         >

        </el-table-column>
        <el-table-column

          prop="thread_phone"
          label="客户电话"
         >

        </el-table-column>
        <el-table-column

          prop="model_name"
          label="购买车型"
         >

        </el-table-column>
        <el-table-column

          prop="operator_name"
          label="所属合作商"
         >

        </el-table-column>
        <el-table-column

          prop="shop_name"
          label="店铺名"
         >

        </el-table-column>


        <el-table-column

          prop="first_payment"
          label="首付"
         >

        </el-table-column>
        <el-table-column

          prop="month_supply_1st_year"
          label="首年月供"
         >

        </el-table-column>


        <el-table-column

          prop="status_name"
          label="状态"
          width="120">
          <template slot-scope="scope">
            <el-tag>{{scope.row.status_name}}</el-tag>
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          label="操作"
          fixed="right"
          width="80"

          >
          <template slot-scope="scope">
            <router-link v-if="scope.row.status=='auditing_1st'" :to="{ name:'schemasEdit',params: { id: scope.row.id }}" append>
            <el-button type="success" size="mini">

              详情
            </el-button>
          </router-link>
            <div v-else>

              <router-link :to="{ name:'schemasView',params: { id: scope.row.id }}" append>
                <el-button type="success" size="mini">

                  查看
                </el-button>
              </router-link>
            </div>

          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        v-if="!vm.isLoading"
        @size-change="sizeChange($event)"
        @current-change="pageChange($event)"
        :page-size="vm.meta.size"
        :page-sizes="[10,20,30,50,100,1000]"
        :current-page="vm.meta.page"
        layout="total,sizes,prev, pager, next,jumper"
        :total="vm.meta.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import * as Models from '@/api/schemas'
  import * as Shops from '@/api/shops'
  import pages from '@/mixins/pages'
  export default{
    name: "schemasList",
    mixins: [pages],
    components: {
    },
    data(){
      return{
        vm:{
          models:[],
          isNull:false,
          isLoading:false,
          isError:false,
          meta:{},
          query:{}
        },
        shops: [],
        Models



      }
    },
    computed:{},
    mounted() {
      this.vm.query.status = '';
      this.query({reload:true});

      Shops.query().then(res => {
        this.shops = res.models;
      })

    },
    methods: {


    }

  }
</script>
